import PropTypes from '@/utils/PropTypes'
import { Timeline } from 'ant-design-vue'
import { defineComponent, ref, toRefs } from 'vue'
// import './index.less'
export default defineComponent({
  name: 'flowPathCom',
  props: {
    mode: PropTypes.any().def('left'),
    data: PropTypes.array<any>().def([]),
  },
  setup(props, { slots }) {
    const { data, mode } = toRefs(props)
    const slotName = ['dot', 'label', 'pending', 'pendingDot']
    const getSlot = (item: any) => {
      const slot: any = {}
      slotName.forEach((key) => {
        if (item[key]) slot[key] = () => item[key]
      })
      return slot
    }
    return () => (
      <div style={{ margin: '20px 0' }}>
        <Timeline mode={mode.value}>
          {data.value.map((item: any) => (
            <Timeline.Item v-slots={getSlot(item)}>
              {slots.content?.(item)}
            </Timeline.Item>
          ))}
        </Timeline>
      </div>
    )
  },
})
